<template>
	<label class="ui-checkbox" v-if="!isswitchbtn" :style="style" @click.prevent="set" :class="[classname,checkedClass,disabledClass]">
		<span class="ui-checkbox-block"><span class="ui-checkbox-selected"></span></span>
		<slot></slot>
		<input type="checkbox" :name="name" v-model="value" class="ui-sys-checkbox"/>
	</label>

	<label class="ui-checkbox-switch" v-else="isswitchbtn" :style="style" @click.prevent="set" :class="[classname,checkedClass,disabledClass]">
		<span class="ui-checkbox-float">{{text}}</span>
		<!-- <span class="ui-checkbox-bg">{{off}}</span> -->
		<input type="checkbox" :name="name" v-model="value" class="ui-sys-checkbox"/>
	</label>
	
</template>

<script>
	/*
	组件属性[
		value:value值
		style:自定义样式
		class:自定义class
		name:name属性
		disabled：是否交互 true/false
		isswitchbtn:是否为开关按钮
		checked:选中状态 true/false
		tiptext:开关按钮时的提示文字 默认"开,关"
		rules:用于表单验证
			[
				empty:[true/false,"提示信息"],
				int:[true/false,"提示信息"],
				min:[200,"提示信息"],
				...
			]

	]
	组件自定义事件[
		change:选项发生改变时回调的父组件方法，callback(obj[当前实例])
	]
	*/
	export default{
		props:{
			"value":{type:null,default:""},
			'style':{type:null,default:""},
			'classname':{type:null,default:""},
			'name':{type:null,default:""},
			'checked':{type:Boolean,default:false},
			'callback':{type:null,default:false},
			"isswitchbtn":{type:Boolean,default:false},
			'disabled':{type:Boolean,default:false},
			"tiptext":{type:Boolean,default:{on:'开',off:'关'}},
			'rules':{type:Array,default:[]}
		},
		data(){
			return {
				uiType:"ui-checkbox",
				disabledClass:this.disabled?"disabled":"",
			}
		},
		computed:{
			text(){
				if(this.isswitchbtn){
					return this.checked?this.tiptext.on:this.tiptext.off;
				}				
			},
			checkedClass(){
				this.$emit('change',this);//回调
				if(this.checked){
					return "on";
				}else{
				    this.value="";
					return "";
				}
			}
		},
		methods:{			
			set(){
				if(!this.disabled){
					this.checked=!this.checked;
				}
			}
		}
	}
</script>
